import { type Directive } from 'vue';

const zoomFun: Object = {
  onMouseEnter(event: MouseEvent) {
    const target = event.target as HTMLElement;
    target.style.transition = 'all 0.5s';
    target.style.scale = '1.2';
  },
  
  onMouseLeave(event: MouseEvent) {
    const target = event.target as HTMLElement;
    target.style.transition = 'all 0.5s';
    target.style.scale = '1';
  }
}

const zoomDirective: Directive = {
  mounted(el: HTMLElement) {
    el.addEventListener('mouseenter', zoomFun.onMouseEnter);
    el.addEventListener('mouseleave', zoomFun.onMouseLeave);
  },
  unmounted(el: HTMLElement) {
    el.removeEventListener('mouseenter', zoomFun.onMouseEnter);
    el.removeEventListener('mouseleave', zoomFun.onMouseLeave);
  },
};

const reverseFun: Object = {
  onMouseEnter(event: MouseEvent) {
    const target = event.target as HTMLElement;
    target.lastChild.style.transform = 'perspective(500px) rotateX(360deg)';
  },
  
  onMouseLeave(event: MouseEvent) {
    const target = event.target as HTMLElement;
    target.lastChild.style.transform = 'perspective(500px) rotateX(0)';
  }
}

const reverseDirective: Directive = {
  mounted(el: HTMLElement) {
    const content = el.innerHTML;
    el.innerHTML = ''; // 清空原内容
    const newChild = document.createElement('div');
    newChild.innerHTML = content;
    el.appendChild(newChild);

    newChild.style.transition = 'all 0.5s';
    newChild.style.transformStyle = 'preserve-3d';
    newChild.style.cursor = 'default';

    el.addEventListener('mouseenter', reverseFun.onMouseEnter);
    el.addEventListener('mouseleave', reverseFun.onMouseLeave);
  },
  unmounted(el: HTMLElement) {
    el.removeEventListener('mouseenter', reverseFun.onMouseEnter);
    el.removeEventListener('mouseleave', reverseFun.onMouseLeave);
  },
}

export default { zoomDirective, reverseDirective };